<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>条码扫描器</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    #reader {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    #result {
      font-size: 1.2em;
      word-break: break-all;
    }

    .scan-section {
      margin-top: 20px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .container {
      padding: 15px;
    }
  </style>
</head>
<body>
<div class="container">
  <h2 class="text-center mb-4">条码扫描器</h2>

  <div class="scan-section">
    <div id="reader"></div>
    <div id="result" class="mt-3"></div>
    <div id="error" class="text-danger mt-2"></div>
  </div>

  <div class="text-center mt-4">
    <button id="restartButton" class="btn btn-primary btn-lg d-none">重新扫描</button>
  </div>
</div>

<!-- 引入依赖库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/html5-qrcode@2.3.4/dist/html5-qrcode.min.js"></script>-->
<script src="/html5-qrcode.min.js"></script>

<script>
  $(document).ready(function() {
    const html5QrCode = new Html5Qrcode("reader");
    const config = {
      fps: 10,
      formatsToSupport: [
        Html5QrcodeSupportedFormats.EAN_13,
        Html5QrcodeSupportedFormats.EAN_8,
        Html5QrcodeSupportedFormats.UPC_A,
        Html5QrcodeSupportedFormats.UPC_E,
        Html5QrcodeSupportedFormats.CODE_128
      ],
      videoConstraints: {
        width: { ideal: 640 },
        height: { ideal: 480 },
        facingMode: "environment"
      }
    };

    // 启动扫描
    html5QrCode.start(
            // { deviceId: { exact: "" } },
            { facingMode: "environment" },
            // config,
            { fps: 10, qrbox: {width: 250, height: 250}},
            onScanSuccess,
            onScanError
    ).catch(err => {
      showError("无法启动摄像头: " + err);
    });

    // 扫描成功回调
    function onScanSuccess(decodedText, decodedResult) {
      $("#result").html(`
                    <div class="alert alert-success">
                        <strong>扫描成功！</strong><br>
                        ${decodedText}
                    </div>
                `);
      html5QrCode.stop();
      $("#restartButton").removeClass("d-none");
    }

    // 扫描错误回调
    function onScanError(errorMessage) {
      showError("扫描错误: " + errorMessage);
    }

    // 显示错误信息
    function showError(message) {
      $("#error").html(`<div class="alert alert-danger">${message}</div>`);
    }

    // 重新扫描按钮点击事件
    $("#restartButton").click(function() {
      $(this).addClass("d-none");
      $("#result").empty();
      html5QrCode.start(
              { deviceId: { exact: "" } },
              config,
              onScanSuccess,
              onScanError
      ).catch(err => {
        showError("无法启动摄像头: " + err);
      });
    });
  });
</script>
</body>
</html>